:root {
  --theme-color: #587FF0;
  --theme-color-light: rgba(88, 127, 240, 0.9);
  --theme-color-lighter: rgba(88, 127, 240, 0.1);
}

// 导航栏相关
.navi-bar {
  border-right: 1px solid var(--theme-color-light) !important;
  
  .el-menu-item {
    .link.router-link-active .icon {
      color: var(--theme-color) !important;
    }
  }
}

// 按钮和交互元素
.el-button--primary,
.el-switch.is-checked .el-switch__core {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}

// 表单元素
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner,
.el-switch.is-checked .el-switch__core {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}

// 文字和链接
.el-tabs__item.is-active,
.el-link.el-link--primary,
.chat-file-name,
a,
.el-button--text {
  color: var(--theme-color) !important;
}

// 边框和背景
.el-tabs__active-bar,
.el-progress-bar__inner {
  background-color: var(--theme-color) !important;
}

// 聊天相关
.chat-msg-mine .chat-msg-bottom {
  .chat-msg-text {
    background-color: var(--theme-color-light) !important;
    border: none !important;

    &:before {
      border-left-color: var(--theme-color-light) !important;
    }

    &:after {
      display: none !important;
    }
  }
}

.chat-msg-tip {
  color: var(--theme-color) !important;
}

// 选中和悬浮效果
.friend-item.active,
.group-item.active,
.chat-item.active {
  background-color: var(--theme-color-lighter) !important;
  border-left: 3px solid var(--theme-color) !important;
}

.friend-item:hover,
.group-item:hover,
.chat-item:hover {
  background-color: var(--theme-color-lighter) !important;
}

// 输入框相关
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--theme-color) !important;
}

.el-input.is-active .el-input__inner, 
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--theme-color) !important;
}

// 消息提示
.unread-text {
  background-color: var(--theme-color) !important;
}

// 群成员标签
.role-tag.owner-tag,
.role-tag.admin-tag {
  background-color: var(--theme-color) !important;
}

// 其他交互元素
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-select-dropdown__item.selected,
.el-select-dropdown__item.hover,
.el-cascader-node.in-active-path, 
.el-cascader-node.is-active,
.el-tree-node.is-current > .el-tree-node__content {
  color: var(--theme-color) !important;
  background-color: var(--theme-color-lighter) !important;
}

// 边框颜色
.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input__inner:focus {
  border-color: var(--theme-color) !important;
}

// 加载和进度
.el-loading-spinner .path {
  stroke: var(--theme-color) !important;
}

// 分割线
.el-divider__text {
  color: var(--theme-color) !important;
  background-color: white;
}

// 侧边栏
.group-side-member-list,
.friend-list-box,
.chat-list-box {
  border-right: 1px solid var(--theme-color-light) !important;
}

// 头部和底部
.el-header,
.el-footer {
  border-color: var(--theme-color-lighter) !important;
}

// 滚动条
.el-scrollbar__thumb {
  background-color: var(--theme-color-light) !important;
}

// 弹窗
.el-dialog__headerbtn:focus .el-dialog__close, 
.el-dialog__headerbtn:hover .el-dialog__close {
  color: var(--theme-color) !important;
}

// 表格
.el-table th.el-table__cell {
  background-color: var(--theme-color-lighter) !important;
}

// 菜单
.el-menu-item:hover,
.el-submenu__title:hover {
  color: var(--theme-color) !important;
}

// 时间选择器
.el-date-table td.today span,
.el-date-table td.available:hover,
.el-date-picker__header-label:hover {
  color: var(--theme-color) !important;
}

.el-date-table td.current:not(.disabled) span {
  background-color: var(--theme-color) !important;
}

// 上传
.el-upload:hover {
  border-color: var(--theme-color) !important;
}

// 标签
.el-tag--primary {
  background-color: var(--theme-color-lighter) !important;
  border-color: var(--theme-color-light) !important;
  color: var(--theme-color) !important;
}

// 通知
.el-notification {
  border-left: 4px solid var(--theme-color) !important;
}

// 气泡确认框
.el-popconfirm__action {
  .el-button--primary {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
  }
}